<template>
  <div class="draggable-designer-form">
    <div class="left">
      <left></left>
    </div>
    <div class="content">
      <content></content>
    </div>
    <div class="right">
      <right></right>
    </div>
  </div>
</template>

<script setup >
import { ref, reactive, toRefs, onMounted} from 'vue'
import left from './layout/left.vue'
import right from './layout/right.vue'
import content from './layout/content.vue'
</script>
<style scoped lang="less">
@import "./styles/index.less";
.draggable-designer-form{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  background-color: #f5f6f6;
}
.left{
  width: 20%;
}
.content{
  width: 60%; 
  padding:0px 10px;
}
.right{
  width: 20%; 
}
</style>